<template>
    <view class="box">
        <!-- 客服服务 -->
        <view class="severce">
            <!-- 电话客服 -->
            <view class="iphoneserve postion">
                <view>
                    <image class="img" src="../../static/icon/kefu-Phone@3x.png"></image>
                </view>
                <view>
                    <p class="p">电话客服</p>
                    <span class="span">09:00~18:00</span>
                </view>
            </view>
            <!-- 微信客服 -->
            <view class="wxserver postion">
                <view>
                    <image class="img" src="../../static/icon/kefu-Wechat@3x.png"></image>
                </view>
                <view>
                    <p class="p">微信客服</p>
                    <span class="span">24小时专属服务</span>
                </view>
            </view>
        </view>
        <!-- help 功能 -->
        <view class="help">
            <!-- 常见问题 -->
            <view class="helpflex" v-for="item in helparr" :key="item">
                <view class="imgtext">
                    <image class="img" :src="item.img"></image>
                    <p class="text">{{item.title}}</p>
                </view>
                <view class="textarr">
                    <view class="ulclass" v-for="(itemson, index) in item.text" :key="itemson">
                        <image @click="textarrclickimg(itemson.id, index)" class="img"
                            src="../../static/icon/more@3x.png"></image>
                        <p class="p">
                            {{itemson}}
                        </p>
                    </view>
                </view>
            </view>
        </view>
        <!-- 其他问题 -->
        <view class="message">
            <textarea class="textarea" placeholder-style="color: #cccccc" placeholder="如有其他问题请在此输入并提交"></textarea>
        </view>
        <!-- 提交按钮 -->
        <view class="buttonfooter">
            <button class="button">提交</button>
        </view>
        <!-- 底部占位符 -->
        <view class="footer"></view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                // help 数据数组
                helparr: [{
                    id: 1,
                    title: '猜你想问',
                    img: '../../static/icon/wenti-cj@3x.png',
                    text: ['1、问题一 ?', '2、问题二 ?', '3、问题三 ?']
                }, {
                    id: 2,
                    title: '订单问题',
                    img: '../../static/icon/wenti-dd@3x.png',
                    text: ['1、订单问题一 ?', '2、订单问题二 ?', '3、订单问题三 ?']
                }, {
                    id: 3,
                    title: '退款问题',
                    img: '../../static/icon/wenti-hb@3x.png',
                    text: ['1、退款问题一 ?', '2、退款问题二 ?', '3、退款问题三 ?']
                }],
                activeitemson: 0
            };
        },
        methods: {
            textarrclickimg(index) {
                this.activeitemson = index
            }
        }
    }
</script>

<style lang="scss" scoped>
    .box {
        padding: 30rpx;
        background-color: #EEEEEE;
    }

    // 电话客服
    .severce {
        display: flex;
        justify-content: space-between;
        height: 150rpx;

        .postion {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .img {
            margin-right: 15rpx;
            width: 90rpx;
            height: 90rpx;
            border-radius: 20rpx;
        }

        .p {
            font-size: 24rpx;
            color: #191919;
        }

        .span {
            font-size: 22rpx;
            color: #bbbbbb;
        }

        .iphoneserve {
            width: 330rpx;
            height: 150rpx;
            background-color: #ffffff;
            border-radius: 20rpx;
        }

        .wxserver {
            width: 330rpx;
            height: 150rpx;
            background-color: #ffffff;
            border-radius: 20rpx;
        }
    }

    // help 帮助
    .help {
        margin-top: 30rpx;
        background-color: #ffffff;
        border-radius: 20rpx;
        padding: 30rpx;

        view:last-child {
            border-bottom: 0;
        }

        .helpflex {
            border-bottom: 1px solid #EEEEEE;
            display: flex;
            margin-top: 40rpx;
        }

        .imgtext {
            width: 120rpx;
            height: 123rpx;
            text-align: center;

            .img {
                width: 90rpx;
                height: 90rpx;
            }

            .text {
                font-size: 24rpx;
                color: #999999;
            }
        }

        .textarr {
            margin-left: 50rpx;

            .showtext {
                width: 466rpx;
                height: 152rpx;
                background-color: #f2f2f2;
                border-radius: 20rpx;
                padding: 30rpx;

                font-size: 24rpx;
                color: #999999;
                // opacity: 0.6;
            }

            .ulclass {
                width: 466rpx;
                height: 88rpx;
                line-height: 50rpx;
            }

            .p {
                font-size: 28rpx;
                color: #191919;
                font-weight: bold;
            }

            .img {
                float: right;
                width: 25rpx;
                height: 25rpx;
                margin-top: 20rpx;
            }
        }
    }

    // message 其他信息
    .message {
        margin-top: 30rpx;
        height: 306rpx;
        background-color: #ffffff;
        border-radius: 20rpx;
        padding: 30rpx;
        font-size: 28rpx;
        color: black;
        margin-bottom: 30rpx;

        .textarea {
            height: 306rpx;
        }
    }

    // 提交按钮
    .button {
        width: 570rpx;
        height: 98rpx;
        background-color: #1bc078;
        border-radius: 49rpx;
        line-height: 98rpx;
        font-size: 28rpx;
        color: #ffffff;
    }

    .footer {
        height: var(--status-bar-height);
    }
</style>
